<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar title="我的钱包" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<text class="slot" slot="right" @click="handleSlotTap">交易明细</text>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="我的钱包" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<view class="slot"><text @click="handleSlotTap">交易明细</text></view>
		</u-navbar>
		<!-- #endif -->
		<view class="main">
			<view class="card">
				<text class="title">账户余额</text>
				<view class="price">
					<text class="symbol">￥</text>
					<text>{{ money }}</text>
				</view>
			</view>
			<!--  -->
			<view class="btns">
				<u-button class="btn" :custom-style="customStyle" shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleRecharge">立即充值</u-button>
				<u-button class="btn" :custom-style="customStyle" shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleWithdraw">立即提现</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			money: '' // 账户余额
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShow() {
		// 获取用户余额
		this.$tkRequest('/api/User/userInfo').then(res => {
			this.money = res.data.money;
		});
	},
	methods: {
		handleSlotTap() {
			uni.navigateTo({
				url: './ledger'
			});
		},
		// 充值
		handleRecharge() {
			uni.navigateTo({
				url: './recharge/recharge'
			});
		},
		// 提现
		handleWithdraw() {
			uni.showToast({
				title: '提现功能暂不可用',
				icon: 'none'
			});
			// uni.navigateTo({
			// 	url: './withdraw/withdraw'
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 0 $uni-spacing-row-lg;
	color: #f1f1f1;
	font-size: 11pt;
	/* #ifdef APP-PLUS */
	font-size: 14pt;
	/* #endif */
}

.main {
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;

	.card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background-image: linear-gradient(90deg, rgb(27, 52, 92), rgb(49, 84, 142));
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		border-radius: 15rpx;
		color: #f1f1f1;

		.title {
			padding: $uni-spacing-col-lg 0;
		}

		.price {
			padding-bottom: 60rpx;
			font-size: 1.6rem;

			.symbol {
				font-size: 12pt;
			}
		}
	}

	.btns {
		padding: 100rpx 0 0 0;
		display: flex;
		align-items: center;
		flex-direction: column;

		.btn {
			width: 90%;
			margin: $uni-spacing-col-base 0;
		}
	}
}
</style>
